<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">在mounted中修改数据</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
      timer: null,
    };
  },
  /* 
    在挂载将内存中的虚拟DOM转为真实DOM
    在这个阶段 页面呈现的是未经过Vue编译的DOM结构 并且所有对DOM的操作都不生效
    这DOM结构和Vue没有任何的关系
    (在脚手架中的index.html的容器app中添加一些文字即可看见效果)
    在这个阶段所有操作DOM都不生效,因为我们在vue中操作的是Vue生成的DOM,而不是模板中的DOM,模板中的DOM迟早要被替换掉
  */
  beforeMount() {
    console.log(this, "beforeMount中的this");
    debugger;
  },
  /* 
    在挂载后
    在这个阶段之前,Vue根据虚拟DOM创建好了真实DOM,并且直接替换了el容器
    此时页面中呈现的都是Vue编译后的DOM
    对DOM的操作均有效 初始化过程结束
    一般来说在这个阶段,我们会做所有的初始化操作(开启定时器,发送初始化请求,发起订阅,绑定自定义事件等等...)
  */
  mounted() {
    debugger;
  },
  
};
</script>

<style></style>
